
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table} from 'antd';
import {TABLE, DATETIME_FORMAT, FILES_API} from '../constants';
import {formatDateTime, conventEnumValueToString, formatAmount} from '../utils';
import {currency, claimPIStatus, claimProformaInvoiceStatus} from '../Enum';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import ImagePreviewBtn from '../common/ImagePreviewBtn';
const {Description} = DescriptionList;
import {sortBy} from 'lodash';
import styles from './style.css';
/* eslint-disable react/prefer-stateless-function */
class Detail extends React.PureComponent {
    render() {
        const {attachments = [], approveResults = []} = this.props.detail;
        const fileList = attachments.map(item => (<Description key={item.fileId}><a icon="download" href={`${FILES_API.files}/${item.fileId}`} size="small">
            {item.fileName}</a></Description>));
        const approveData = sortBy(approveResults, 'approveTime');
        const approveColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.approveColumn.approverName',
                    defaultMessage: '审核人姓名'
                }),
                dataIndex: 'approverName',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.approveColumn.approveTime',
                    defaultMessage: '审核时间'
                }),
                dataIndex: 'approveTime',
                render: text => formatDateTime(text, DATETIME_FORMAT)
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.approveColumn.approveResult',
                    defaultMessage: '审核结果'
                }),
                dataIndex: 'approveResult',
            }, {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.approveColumn.approveComment',
                    defaultMessage: '审核意见'
                }),
                dataIndex: 'approveComment',
            }
        ];
        return (
            <div>
                <Card>
                    <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                        id: 'commonDetail.order.title',
                        defaultMessage: '发票信息'
                    })}</Col>
                    <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.code',
                                defaultMessage: '发票号'
                            })}>
                            {this.props.detail.code}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.claimSettlementBill',
                                defaultMessage: '结算单编号'
                            })}>
                            {this.props.detail.claimSettlementBill}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.brand',
                                defaultMessage: '品牌'
                            })}>
                            {`(${this.props.detail.brandCode})${this.props.detail.brandName}`}
                        </Description>
                        {this.props.isDealerUser ? null
                            : <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.dealerCode',
                                    defaultMessage: '服务站编号'
                                })}>
                                {this.props.detail.dealerCode}
                            </Description>}
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.sparePartsCost',
                                defaultMessage: '材料费'
                            })}>
                            {formatAmount(this.props.detail.sparePartsCost)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.administrationFee',
                                defaultMessage: '配件管理费'
                            })}>
                            {formatAmount(this.props.detail.administrationFee)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.labourCost',
                                defaultMessage: '工时费'
                            })}>
                            {formatAmount(this.props.detail.labourCost)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.accessoryMaterial',
                                defaultMessage: '辅料费'
                            })}>
                            {formatAmount(this.props.detail.accessoryMaterial)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.amount',
                                defaultMessage: '费用合计'
                            })}>
                            {formatAmount(this.props.detail.amount)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.currency',
                                defaultMessage: ' 币种'
                            })}>
                            {this.props.detail.currency}
                            {conventEnumValueToString(currency, this.props.detail.currency)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.status',
                                defaultMessage: '状态'
                            })}>
                            {conventEnumValueToString(claimProformaInvoiceStatus, this.props.detail.status)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.paymentStatus',
                                defaultMessage: '赔付状态'
                            })}>
                            {conventEnumValueToString(claimPIStatus, this.props.detail.paymentStatus)}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.sapVoucherNo',
                                defaultMessage: 'SAP凭证号'
                            })}>
                            {this.props.detail.sapVoucherNo}
                        </Description>
                        <Description
                            term={this.props.intl.formatMessage({
                                id: 'commonDetail.info.submitTime',
                                defaultMessage: '开票时间'
                            })}>
                            {formatDateTime(this.props.detail.submitTime, DATETIME_FORMAT)}
                        </Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detail.approve.details.title',
                        defaultMessage: '审核列表'
                    })}>
                    <Table className="white-space-nowrap" rowKey="id" columns={approveColumns} pagination={false} dataSource={approveData} {...TABLE} />
                </Card>
                {this.props.isDetail &&
                    <Card
                        extra={<ImagePreviewBtn attachments={attachments} />}
                        title={this.props.intl.formatMessage({
                            id: 'commonDetail.attachments.title',
                            defaultMessage: '附件清单'
                        })}>
                        {fileList.length ? <DescriptionList col={1} size="large">
                            {fileList}
                        </DescriptionList> : this.props.intl.formatMessage({
                            id: 'commonDetail.attachments.noData',
                            defaultMessage: '暂无附件'
                        })}
                    </Card>}
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
    isDetail: false,
    isDealerUser: true,
    showBrand: false,
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
    isDetail: PropTypes.bool,
    operations: PropTypes.any,
    showBrand: PropTypes.bool
};
export default injectIntl(Detail);
